<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566133_wopoq29vrt.css">
  <!-- 引入样式文件 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.3.3/lib/index.css">
  <link rel="stylesheet" href="home.css">
</head>

<body>
  <div id="container">
    <!--幻灯片 start-->
    <div class="swipper-box">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="https://www.maohz.com/mhzpage/images/banner/draw-banner.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://www.maohz.com/mhzpage/images/banner/nursing-banner.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://www.maohz.com/mhzpage/images/banner/draw-banner.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://www.maohz.com/mhzpage/images/banner/draw-banner.jpg" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--幻灯片 end-->

    <!--商品列表 start-->
    <div class="goods-list">
      <ul>
        <li v-for="(good,index) in goodsList" v-on:click="jumpDetail(good)">
          <!-- <a v-bind:href="'detail.html?id='+good.id"> -->
          <img v-bind:src="good.thumbnail.url" alt="">
          <p class="title">{{good.name}}</p>
          <p class="price">
            <span>￥{{good.price}}</span>
            <em>￥599</em>
          </p>
          <!-- </a> -->
        </li>
      </ul>
    </div>
    <!--商品列表 end-->
    <img src="images/dog.jpg"/>
    <!--底部导航 start-->
    <div class="tabbar">
        <image src=""></image>
      <ul>
        <li>
          <a href="#" @click="onClickIcon">
            <span class="iconfont icon-home"></span>
            <p>首页</p>
          </a>

        </li>
        <li>
          <span class="iconfont icon-shoppingcart"></span>
          <p>购物车</p>
        </li>
        <li>
          <span class="iconfont icon-home"></span>
          <p>订单</p>
        </li>
        <li>
          <span class="iconfont icon-home"></span>
          <p>我的</p>
        </li>
      </ul>
    </div>

    <!--底部导航 end-->
  </div>
  <script src="vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.3.3/lib/vant.min.js"></script>
  <script src="axios.min.js"></script>
  <!--将es6转换为es5-->
  <script src="es6-promise.auto.min.js"></script>
  <script src="SHA1.js"></script>
 <script>
    var now = Date.now();
    var appKey = SHA1("A6013700252001" + "UZ" + "2AE3F19A-AB62-34C7-D81B-BC1FE8123458" + "UZ" + now) + "." + now

    var vm = new Vue({
      el: "#container",
      data: {
        goodsList: []
      },
      created: function () {
        this.getGoodList()
      },
      methods: {
        downImg(url) {
          const image = new Image();
          // 解决跨域 canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.src = url;
          image.onload = function () {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            //得到图片的base64编码数据
            const url = canvas.toDataURL("image/png");
            // 生成一个 a 标签
            const a = document.createElement("a");
            // 创建一个点击事件
            const event = new MouseEvent("click");
            // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
            a.download = name || "图片";
            // 将生成的 URL 设置为 a.href 属性
            a.href = url;
            // 触发 a 的点击事件
            a.dispatchEvent(event);
            // return a;
          };
        },
        onClickIcon: function () {

          alert("1")
          var url = "http://mhzimg.mzd1893.com/2/xcxcodeimg/35.jpg"
          this.downImg(url)
        },
        onClickButton: function () {
          alert("2")
        },
        jumpDetail: function (item) {
          window.location.href = "detail.html?id=" + item.id
        },
        //获取商品列表
        getGoodList: function () {
          var _this = this;
          axios.get('https://d.apicloud.com/mcm/api/ware', {
            headers: {
              "X-APICloud-AppId": "A6013700252001",
              "X-APICloud-AppKey": appKey
            }
          })
            .then(function (response) {
              _this.goodsList = response.data;
              console.log(response.data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      }
    })
  </script>
</body>

</html>